@require "./common/variable"

fillTone(color)
  background-color color
  border-color color

lineTone(color)
  color color
  border-color color

horizontalPadding(value)
  padding-left value
  padding-right value

type(base, light, dark)
  --wave-color base
  color #fff
  fillTone(base)
  &:hover, &:focus
    fillTone(light)
  &:active
    fillTone(dark)
  &.is-loading, &.is-disabled 
    fillTone(light)

dashed(base, light, dark)
  border-style dashed
  background-color #fff
  color base
  &:hover, &:focus
    lineTone(light)
  &:active
    lineTone(dark)
  &.is-loading, &.is-disabled 
    lineTone(light)

ghost(base, light, dark)
  background-color transparent
  color base
  &:hover, &:focus
    lineTone(light)
  &:active
    lineTone(dark)
  &.is-loading, &.is-disabled 
    lineTone(light)

text(base, light, dark)
  --wave-color none
  background-color transparent
  border none
  padding 6px 0
  color base
  &:hover, &:focus
    color light
  &:active
    color dark
  &.is-loading, &.is-disabled
    color light

typeStyle(base, light, dark)
  type(base, light, dark)
  &.is-dashed
    dashed(base, light, dark)
  &.is-ghost
    ghost(base, light, dark)
  &.is-text
    text(base, light, dark)

roundShape(radius, padding)
  border-radius radius
  horizontalPadding(padding)

.tulp-button
  position relative
  font-size $_font-size
  border 1px solid
  box-sizing border-box
  border-radius $_button-border-radius
  min-height $_button-height
  line-height 1
  cursor pointer
  display inline-flex
  justify-content center
  align-items center
  transition $_color-transition, $_border-color-transition, $_background-transition
  horizontalPadding($_button-padding)
  &__icon
    box-sizing border-box
    display inline-flex
    width 1em
    margin-right 6px
    height 1em
    &.is-uncontent
      margin-right 0
  &__icon-loading
    width 1em
    height 1em
  &.is-round
    roundShape($_border-radius-round, $_button-padding-round)
  &.is-circle
    roundShape($_border-radius-round, $_button-padding-circle)

.tulp-button
  &:focus
    outline none
  &--default
    --wave-color $_color-primary
    color $_color-text-primary
    background-color #fff
    border-color $_border-color
    &:hover, &:focus
      color $_color-primary
      border-color $_color-primary
    &:active
      color $_color-primary-dark
      border-color $_color-primary-dark
    &.is-loading, &.is-disabled
      color $_color-text-looming
      border-color $_border-color-light
    &.is-dashed
      border-style dashed
    &.is-ghost
      background-color transparent
    &.is-text
      --wave-color none
      background-color transparent
      border none
      padding 6px 0
      &:hover, &:focus
        color $_color-primary
      &:active
        color $_color-primary-dark
      &.is-loading, &.is-disabled
        color $_color-primary
  &--primary
    typeStyle($_color-primary, $_color-primary-light, $_color-primary-dark)
  &--success
    typeStyle($_color-success, $_color-success-light, $_color-success-dark)
  &--info
    typeStyle($_color-info, $_color-info-light, $_color-info-dark)
  &--warning
    typeStyle($_color-warning, $_color-warning-light, $_color-warning-dark)
  &--error
    typeStyle($_color-error, $_color-error-light, $_color-error-dark)

.tulp-button-size
  &--small
    min-height $_button-small-height
    horizontalPadding($_button-small-padding)
    &.is-round
      roundShape($_border-radius-small-round, $_button-small-padding-round)
    &.is-circle
      roundShape($_border-radius-small-circle, $_button-small-padding-circle)
  &--big
    min-height $_button-big-height
    horizontalPadding($_button-big-padding)
    &.is-round
      roundShape($_border-radius-big-round, $_button-big-padding-round)
    &.is-circle
      roundShape($_border-radius-big-circle, $_button-big-padding-circle)

.tulp-width-expand-transition-active
  transition width 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out